// HTML 标签，以小写字母开头的标签名。
var myDivElement = <div className="foo border">HTML div</div>;
ReactDOM.render(myDivElement, document.querySelector('#container1'));

// React 组件，以大写字母开头。
var MyComponent = React.createClass({
    render() {
        return <div className="border"> Component div </div>;
    }
});
var myElement = <MyComponent someProperty={true}/>;
ReactDOM.render(myElement, document.getElementById('container2'));

// jsx 与 js 的转换
// myComponent1 == myComponent2
var myComponent1 = <MyComponent color="blue"/>;
var myComponent2 = React.createElement(MyComponent, {color: 'blue'});
// 含有 child 时
var ChildComponent = React.createClass({
    render() {
        return <div className="border"> child div </div>;
    }
});
// myComponent11 == myComponent21
var myComponent11 = <MyComponent color="blue"><ChildComponent>textContent</ChildComponent></MyComponent>;
var myComponent21 = React.createElement(MyComponent, {color: 'blue'}, React.createElement(ChildComponent, null, 'textContent'));
// 设置组件名称
var NameComponent = React.createClass({
    displayName: 'MyName',
    render() {
        return <div className="border">Name Component</div>;
    }
});
ReactDOM.render(<NameComponent />, document.querySelector('#container3'));

// js 表达式使用
// 要使用 JavaScript 表达式作为属性值，只需把这个表达式用一对大括号 ({}) 包起来，不要用引号 ("")
var Nav = React.createClass({
    render() {
        return <div> Nav </div>;
    }
});
var Login = React.createClass({
    render() {
        return <div> Login </div>;
    }
});
var Person = React.createClass({
    render() {
        return <div> Person </div>;
    }
});
// person1 == person2
var person1 = <Person name={window.isLoggedIn ? window.name: ''}/>;
var person2 = React.createElement(Person, {
    name: (window.isLoggedIn ? window.name : '')
});

// 子节点
// person11 == person21
var person11 = <Person>{window.isLoggedIn ? <Nav /> : <Login />}</Person>;
var person21 = React.createElement(
    Person,
    null,
    window.isLoggedIn ? React.createElement(Nav) : React.createElement(Login)
);